<template>
	<unicloud-db v-slot:default="{data, loading, error, options}" collection="ubr_hoter_order" where="" @load="ismydata"
		getcount="true">
		
		<view>
			<!-- 弹出详情页 -->
			<view class="datalis-waike" v-if="detailsshow">
				<view class="datails-waike-1">
					<uni-table stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th align="center">订单详情</uni-th>
						</uni-tr>
						<uni-tr>
							<uni-td>订单编号</uni-td>
							<uni-td>客户姓名</uni-td>
							<uni-td>客户手机号</uni-td>
							<uni-td>客户邮箱</uni-td>
							<uni-td>订单价格</uni-td>
							<uni-td>救援电话</uni-td>
							<uni-td>订单时间</uni-td>
						</uni-tr>
						<uni-tr >
							<uni-td>{{mydetails.u}}</uni-td>
							<uni-td>{{mydetails.d}}</uni-td>
							<uni-td>{{mydetails.z}}</uni-td>
							<uni-td>{{mydetails.e}}</uni-td>
							<uni-td>{{mydetails.p}}</uni-td>
							<uni-td>{{mydetails.jy}}</uni-td>
							<uni-td>{{timestampToTime(mydetails.t)}}</uni-td>
						</uni-tr>
					</uni-table>
					<button class="detalis-btn" @click="datailsif">退出订单详情</button>
				</view>
			</view>
			<!-- 弹出提示框 -->
			<view class="tishi-waike" v-if="mytishi">
				<view class="tishi-waike-1">
					<view>是否要删除订单信息</view>
					<button class="btn-1" @click="ismyDel()">确定</button>
					<button class="btn-2" @click="myopen">取消</button>
				</view>
			</view>
			<!-- 这里是页面外部 -->
			<view class="order_management">
				<!-- 这里是页面头部 推荐使用ul -->
				<view class="nav-title">
					订单状态管理
				</view>
				<view class="nav-fgf"></view>
				<view class="nav-option">
					<view class="nav-option-title">
						<view class="nav-option-title-waike">
							<span class="nav-option-tit-1">订单编号</span>
							<span class="nav-option-tit-2">入住时间</span>
							<span class="nav-option-tit-3">结束时间</span>
							<span class="nav-option-tit-4">订单状态</span>
							<span class="nav-option-tit-5">几晚</span>
							<span class="nav-option-tit-6">操作</span>
						</view>
					</view>
					<view class="nav-option-title" v-for="(item,index) in mydata" :key="index">
						<view class="nav-option-title-waike">
							<span class="nav-option-tit-1">{{item.uid}}</span>
							<span class="nav-option-tit-2">{{item.qsrq}}</span>
							<span class="nav-option-tit-3">
								{{
								item.jsrq
							}}
							</span>
							<span class="nav-option-tit-4">{{
								item.zhuangtai==1?'待支付':
								item.zhuangtai==2?'已支付':
								item.zhuangtai==3?'待使用':
								item.zhuangtai==4?'未使用':
								item.zhuangtai==5?'已取消':''}}</span>
							<span class="nav-option-tit-5" >{{item.jiwan}}</span>
							<span class="nav-option-btn-6" @click="myopen(item._id)">删除订单</span>
							<span class="nav-option-btn-7" @click="myurlget(item.price,item.time,item.uname,item.uphone,item.email,item.uid,item.phone)">查看详情</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</unicloud-db>
</template>

<script>
	export default {
		data() {
			return {
				item_date:'',
				item_zhuangtai:'',
				item_price:'',
				item_uid:'',
				detailsshow:false,
				mydetails:{},
				myitem_id:'',
				mytishi:false,
				mydataindex:[],
				nav_tit_xdd:true,
				mydata: [],
			}
		},
		methods: {
			datailsif(){
				this.detailsshow=!this.detailsshow
				this.item_date=null
				this.item_price=null
				this.item_uid=null
				this.item_zhuangtai=null
				this.detailsshow=null
				this.mydetails={};
			},
			myurlget(price,time,uname,uphone,email,uid,jy){
				this.detailsshow=true
				this.mydetails={p:price,t:time,d:uname,z:uphone,e:email,u:uid,jy:jy}
				console.log(this.mydetails)
			},
			myopen(item_id){
				this.mytishi=!this.mytishi
				this.myitem_id=item_id
			},
			// /删除数据库内指定订单
			ismyDel(){
				const db = uniCloud.database();
				db.collection("ubr_hoter_order").doc(this.myitem_id).remove()
				this.myopen()
			},
			//控制非选中
			//控制选中
			ismydata(data) {
				console.log(data)
				this.mydata = data
			},
			// 转换时间戳为普通时间
			timestampToTime(timestamp) {
				// 转换时间时需要将参数*1这样就可以简单的转换为数字
				var date = new Date(timestamp * 1); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '/';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D + h + m + s;
			},
			// 转换JSON格式
			toJS(json) {
				return json[0].name;
			}
		}
	}
</script>

<style lang="scss">
	.detalis-btn{
		background-color: #007AFF;
		color: #FFFFFF;
		border-radius: 50px;
		position: relative;
		top: 310px;
		margin: 0 auto;
		width: 500px;
	}
	.datalis-waike{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
		>.datails-waike-1{
			position: absolute;
			width: 1000px;
			height: 500px;
			top: 50%;
			left: 45%;
			transform: translate(-50%, -50%);
			border-radius: 50px;
			background-color: #FFFFFF;
			overflow: auto;
		}
	}
	.tishi-waike{
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0,0,0,0.3);
		>.tishi-waike-1{
			>view{
				position: relative;
				top: 26px;
				left: 10px;
				font-size: 30px;
			}
			>.btn-1{
				background-color: #007aff;
				width: 100px !important;
				top: 69px;
				left: -83px;
				color: #FFFFFF;
			}
			>.btn-2{
				background-color:  #f56c6c;
				width: 100px !important;
				position: relative;
				top: 22px;
				left: 72px;
				color: #FFFFFF;
			}
			position: relative;
			top: 160px;
			left: 575px;
			border-radius: 30px;
			width: 300px;
			height: 200px;
			background-color: #FFFFFF;
		}
	}
	.nav-fgf {
		margin-top: 30rpx;
		height: 5rpx;
		width: 100%;
		background-color: #f5f5f5;
	}

	.order_management {
		>.nav-option {
			>.nav-option-title {
				display: inline-block;

				>.nav-option-title-waike {
					>.nav-option-tit-0{
						>image{
							position: relative;
							top:-1px;
						}
						>.nav-option-tit-0-xdd{
							display: inline-block;
							border: 1px solid #007aff;
							width: 20px;
							height: 20px;
							border-radius: 50%;
							
						}
						color: #007aff;
						border-top: none;
						display: inline-block;
						width: 70px;
						position: relative;
						top: 10px;
						text-align: center;
					}
					>.nav-option-tit-1 {
						border-top: none;
						display: inline-block;
						width: 371px;
						padding-top: 20rpx;
						height: 60rpx;
						border: 1rpx solid #ebeef5;
						text-align: center;
					}

					>.nav-option-tit-2 {
						padding-top: 20rpx;
						height: 60rpx;
						border-top: none;
						display: inline-block;
						width: 241px;
						border: 1rpx solid #ebeef5;
						text-align: center;
					}

					>.nav-option-tit-3 {
						padding-top: 20rpx;
						height: 60rpx;
						display: inline-block;
						width: 162px;
						border-top: none;
						border: 1rpx solid #ebeef5;
						text-align: center;
					}

					>.nav-option-tit-4 {
						padding-top: 20rpx;
						height: 60rpx;
						border-top: none;
						display: inline-block;
						width: 181px;
						border: 1rpx solid #ebeef5;
						text-align: center;
					}

					>.nav-option-tit-5 {
						padding-top: 20rpx;
						height: 60rpx;
						border-top: none;
						display: inline-block;
						width: 184px;
						border: 1rpx solid #ebeef5;
						text-align: center;
					}
					>.nav-option-btn-6{
						color: #FFFFFF;
						display: inline-block;
						padding-top: 20rpx;
						height: 60rpx;
						width: 150px;
						background-color: #f56c6c;
						cursor: pointer;
						border-radius: 50px;
						text-align: center;
					}
					>.nav-option-tit-6{
						padding-top: 20rpx;
						height: 60rpx;
						border-top: none;
						display: inline-block;
						width: 271px;
						border: 1rpx solid #ebeef5;
						text-align: center;
					}
					>.nav-option-btn-7{
						cursor: pointer;
						color: #FFFFFF;
						display: inline-block;
						padding-top: 20rpx;
						height: 60rpx;
						width: 121px;
						background-color: #409EFF;
						border-radius: 50px;
						text-align: center;
					}
					>.nav-option-tit-7{
						padding-top: 20rpx;
						height: 60rpx;
						border-top: none;
						display: inline-block;
						width: 121px;
						border: 1rpx solid #ebeef5;
						text-align: center;
					}
					>.nav-option-1 {
						display: inline-block;
						height: 100rpx;
						padding-top: 30rpx;
						box-sizing: border-box;
						padding-bottom: 30rpx;
						padding-left: 150rpx;
						padding-right: 150rpx;
						border: 1px solid #ebeef5;
						border-bottom: none !important;
					}
				}
			}

			margin-top: 50rpx;
			margin-left: 50rpx;
			margin-right: 50rpx;
			width: 1428px;
			box-sizing: border-box;
			border: 1px solid #ebeef5;

		}

		>.nav-title {
			font-size: 36rpx;
			padding-top: 30rpx;
			margin: 0 50rpx;
		}
	}
</style>
